<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>login</title>
    <link rel="stylesheet" href="css/login.css">
    <script src="vue.js"></script>
    <script src="jquery.js"></script>
  </head>
  <body style="background-image:url(images/bg.png);background-repeat:no-repeat;background-size:cover;">
    <div id="app">
    <table border="1" width="50%" style="border-collapse: collapse;">
      <tr>
          <th>用户名</th>
          <th>密码</th>
          <th>姓名</th>
      </tr>
      <tr align="center" v-for="item in users">
          <td>{{item.loginName}}</td>
          <td>{{item.pwd}}</td>
          <td>{{item.name}}</td>
      </tr>
  </table>
  </div>
  <script>
    var vm = new Vue({
      el : '#app',
      data :{
        loginName : '',
        pwd : '',
        name :'',
        users : []
      },
      methods :{
         
      },
      created () {
        $.ajaxSetup({
          contentType : "application/json;charset=utf-8"
        });
        var that=this
                $.get("http://api.tutestudio.net/api/getUser",'',function(res){
                    var json=res.data
                    for(var i=0;i<json.length;i++){
                      var user ={loginName : json[i].loginName,pwd:json[i].pwd,name :json[i].name}
                      that.users.push(user)
                    }
                })
      }
      })
  </script>
</body>
</html>